<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    td {
      width: 100px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="wrap">
    姓名： <input type="text" id="username">
    <br>
    年龄: <input type="text" id="age">
    <br>
    性别: <input type="text" id="sex">
    <br>
    爱好: <input type="text" id="hobby">
    <br>
    <button id="add">添加新人</button>
    <button id="sureEdit">确认修改</button>
  </div>
  <hr>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>爱好</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="mytbody">
      <!-- <tr>
        <td>肾虚公子</td>
        <td>18</td>
        <td>男</td>
        <td>女</td>
        <td><button>删除</button></td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // JSON对象
    var arr = [
      {
        "id": +new Date(),
        "isChecked": true,
        "name": 'A1',
        "age": 30,
        "sex": "男",
        "love": "学习",
      }, {
        "id": 1,
        "isChecked": false,
        "name": 'A2',
        "age": 20,
        "sex": "女",
        "love": "健身",
      }, {
        "id": 2,
        "isChecked": true,
        "name": 'A3',
        "age": 40,
        "sex": "女",
        "love": "夜跑",
      }, {
        "id": 3,
        "isChecked": false,
        "name": 'A4',
        "age": 35,
        "sex": "男",
        "love": "睡觉",
      },
      {
        "id": 4,
        "isChecked": false,
        "name": 'A5',
        "age": 35,
        "sex": "男",
        "price": {
          "arr": [{ "size": 1, "age": 2 }, { "size": 2, "age": 9 }]
        },
        "love": "写程序",
      },
    ];
    // 1. JSON类型的对象 存到localStorage 转成字符串去存 JSON.stringify()
    if (!localStorage.datas) { //判断localStorage 没有存过datas 的数据 在设置
      localStorage.setItem("datas", JSON.stringify(arr))
    }


    //2. localStorage内的JSON字符串 取出来 使用  转回JSON对象 JSON.parse()
    var datas = []; //存储转换成json对象的数组
    var mytbody = document.getElementById("mytbody")
    function loadTable() {//加载列表方法
      var arrStr = localStorage.getItem("datas");//取出localStorage中的字符串类型的json
      datas = JSON.parse(arrStr) //将字符串类型的JSON还原 
      console.log(datas)
      var str = '';
      // 循环生成tr
      for (var i = 0; i < datas.length; i++) {
        str += `
              <tr>
                <td>${datas[i].name}</td>
                <td>${datas[i].age}</td>
                <td>${datas[i].sex}</td>
                <td>${datas[i].love}</td>
                <td>
                    <button onclick="del(${i})">删除</button>
                   <button onclick=edit(${JSON.stringify(datas[i])},${i})>编辑</button>
                  </td>
              </tr>
          `
      }
      // 将生成好的tr 放置到tobody
      mytbody.innerHTML = str;
    }
    loadTable(); //首次加载列表方法
    // 添加功能
    var addBtn = document.getElementById("add");
    addBtn.onclick = function () {
      // 1 收集数据 {name:1,age:2,sex:3,love:4}  新的数据
      var obj = {
      };
      obj.name = document.getElementById("username").value;
      obj.age = document.getElementById("age").value;
      obj.sex = document.getElementById("sex").value;
      obj.love = document.getElementById("hobby").value;
      console.log(obj)
      // 2.向datas 中 添加一个新的数据
      datas.push(obj)
      console.log(datas)
      // 把新的datas数组 转成字符串 存到localStorage
      localStorage.setItem("datas", JSON.stringify(datas))
      loadTable(); //添加后调用加载列表方法
    }
    // 删除功能
    function del(index) {
      // 根据下标 删除datas中的数据 
      datas.splice(index, 1)
      //把删除后的数据从新存回localStorage
      localStorage.setItem("datas", JSON.stringify(datas))
      loadTable(); //删除后调用加载列表方法
    }
    // 编辑方法
    var EidtIndex = 0;//编辑下标
    function edit(ele, index) {//ele当前点击行数据
      console.log(ele, index)
      EidtIndex = index; //存储编辑下标到全局变量
      document.getElementById("username").value = ele.name;
      document.getElementById("age").value = ele.age;
      document.getElementById("sex").value = ele.sex;
      document.getElementById("hobby").value = ele.love;

    }
    // 确认修改
    var sureEdit = document.getElementById("sureEdit");
    sureEdit.onclick = function () {
      // 1 收集数据 {name:1,age:2,sex:3,love:4}  新的数据
      var obj = {
      };
      obj.name = document.getElementById("username").value;
      obj.age = document.getElementById("age").value;
      obj.sex = document.getElementById("sex").value;
      obj.love = document.getElementById("hobby").value;
      // 把编辑下标的数组元素删除 并在原位置添加新的数据
      // datas.splice(EidtIndex, 1, obj) //找到原数据位置 删除 并添加新的数据项
      // 2  找到元素数据 更改原数据的每一项
      for (var i = 0; i < datas.length; i++) {
        if (i === EidtIndex) {
          datas[i].name = obj.name;
          datas[i].age = obj.age;
          datas[i].sex = obj.sex;
          datas[i].love = obj.love;
        }
      }
      localStorage.setItem("datas", JSON.stringify(datas))
      loadTable(); //更新后调用加载列表方法
    }
  </script>
</body>

</html>